<template>
  <div class="home">
    <ul class="nav">
      <li
        v-for="(item, index) in cateList"
        :key="item._id"
        @click="change(index, item._id)"
        :class="{ active: flag == index }"
      >
        {{ item.title }}
      </li>
    </ul>

    <van-card
      v-for="item in result"
      :key="item._id"
      :price="item.price"
      :title="item.title"
      :thumb="item.pic"
    >
      <template #footer>
        <van-button size="mini" @click="add(item)">++</van-button>
      </template>
    </van-card>
  </div>
</template>

<script>
import { getCate, getList } from "../utils/shopcar.js";
//引入 封装的请求两个json的数据的方法
import { reactive, toRefs, ref } from "vue";
import { useStore } from "vuex";
export default {
  setup(props) {
    const store = useStore();
    const data = reactive({
      cateList: [],
      //分类列表数据
      conList: [],
      // 内容列表数据
      flag: 0,
      //保存点击的下标
      result: [],
      // 保存点击nav导航筛选出来的数据
    });
    getCate().then((res) => {
      console.log(res);
      data.cateList = res.result;
    });
    //获取分类数据
    getList().then((res) => {
      console.log(res);
      data.conList = res.result;
      change(0, "59f1e1ada1da8b15d42234e9");
      //获取到列表数据之后 执行一次筛选筛选出 推荐的数据
    });
    //获取列表数据

    const change = (index, id) => {
      data.flag = index;
      data.result = data.conList.filter((item) => {
        return item.cid == id;
      });
      //点击哪个nav 就拿到id 跟据数据里的cid筛选数据 筛选出的数据保存在result里
    };
    //点击tab切换数据

    const add = (item) => {
      store.commit("add", item);
    };
    //添加购物车调用vuex里的方法添加
    return { ...toRefs(data), change, add };
    // 谁需要return 谁不需要  就是在模版中template中使用的东西就要 return 否则不需要
  },
  //setup就相当于是之前的created
};
</script>
<style lang="scss">
.nav {
  width: 100%;
  height: 40px;
  display: flex;
  background: rgb(96, 59, 110);
  li {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
  .active {
    background: rgb(221, 155, 241);
  }
}
</style>
